import { useNavigate } from 'react-router-dom';
import './style.scss';
const items = [{
    url: '/home',
    icon: '&#xe603;',
    text: '首页',
    name: 'home'
},
{
    url: '/category',
    icon: '&#xe609;',
    text: '分类',
    name: 'category'
},{
    url: '/cart',
    icon: '&#xe6cb;',
    text: '购物车',
    name: 'cart'
},
{
    url: '/home',
    icon: '&#xe8a0;',
    text: '我的',
    name: 'mine'
}];
function Docker (props: {activeName: string}) {
    const navigate = useNavigate();
    const {activeName} = props;
    return (
        <div className="docker">
            {
                items.map(item => {
                    return (
                        <div className={
                            activeName === item.name ? 'docker-item docker-item-active' : 'docker-item' 
                        }
                            key={item.name}
                            onClick={() => {navigate(item.url)}}>
                            <p className="iconfont docker-item-icon" dangerouslySetInnerHTML={{__html:item.icon}}></p>
                            <p className="docker-item-title">{item.text}</p>
                        </div>
                    )
                })
            }
      </div>
    )
}
export default Docker;